<template>
  <el-scrollbar height="100%">
    <div class="w choose">
      <el-card style="background-color:#0f1827;border: #0f1827;">
        <div>
          <el-row>
            <el-col :span="1">
              <p style="color: #646262;font-size: 16px;margin-top: 5px">
                类型 :
              </p>
            </el-col>
            <el-col :span="23">
              <div style="float: left;margin-left: 10px">
                <el-radio-group v-model="tag">
                  <el-radio label="全部" value="" @change="search" class="custom-radio">全部</el-radio>
                  <el-radio
                      v-for="item in tagList" :key="item.label"
                      @change="search" :value="item.value"
                      :label="item.label" class="custom-radio">
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>

        <div style="margin-top: 10px">
          <el-row>
            <el-col :span="1">
              <p style="color: #646262;font-size: 16px;margin-top: 5px">地区 :</p>
            </el-col>
            <el-col :span="23">
              <div style="float: left;margin-left: 10px">
                <el-radio-group v-model="region">
                  <el-radio label="全部" value="" @change="search" class="custom-radio">全部</el-radio>
                  <el-radio
                      v-for="item in regionList" :key="item.label"
                      @change="search" :value="item.value"
                      :label="item.label" class="custom-radio">
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>

        <div style="margin-top: 10px">
          <el-row>
            <el-col :span="1">
              <p style="color: #646262;font-size: 16px;margin-top: 5px">年代 :</p>
            </el-col>
            <el-col :span="23">
              <div style="float: left;margin-left: 10px">
                <el-radio-group v-model="releaseYear">
                  <el-radio label="全部" value="" @change="search" class="custom-radio">全部</el-radio>
                  <el-radio
                      v-for="item in releaseYearList" :key="item.label"
                      @change="search" :value="item.value"
                      :label="item.label" class="custom-radio">
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="w content">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-result
              v-if="paginatedData.length === 0"
              icon="info"
              title="没有电影信息"
              sub-title="请重新选择"
          >
            <template #extra>
              <el-button type="primary" @click="reSearch">重新选择</el-button>
            </template>
          </el-result>
          <div style="text-align: center;margin-top: 10px">
            <el-row :gutter="10">
              <el-col :span="6" v-for="item in paginatedData">
                <div style="margin-top: 20px">
                  <div style="position: relative">
                    <el-image :src="BASE_URL + item.poster"
                              style="width: 80%;height: auto;margin: 0 auto;position: relative;z-index: 1"
                              alt="Film poster"/>
                    <div style="position: absolute;bottom: 0;left: 50%; transform: translateX(-50%);z-index: 2;
                        width: 80%;height: 100%;
                       background: linear-gradient(360deg, #0f1827 8%, rgba(15, 24, 39, 0) 70%);   "
                         @click="watchFilmById(item.filmId)">
                      <p style="position: absolute;bottom: 0;left: 50%;width: 80%;
                              transform: translateX(-50%);z-index: 3;color: #FFFFFF;
                              font-size: 16px;font-weight: bold;">{{ item.filmName }} </p>
                    </div>
                  </div>
                  <el-button @click="watchFilmById(item.id)"
                             style="width: 80%;border-radius: 0 ; border: #671523;
                                background-color: #671523;color: #FFFFFF">观 看
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="text-align: center;margin-top: 30px">
            <el-card style="background-color:#0f1827;border: #0f1827;height: auto">
              <div style="overflow: hidden">
                <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
                <div style="float: left;margin-left: 10px">
                  <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">正在热播</span>
                </div>
              </div>

              <div>
                <div v-for="(item,index) in hit" :key="item.index" @click="watchFilmById(item.filmId)">
                  <div v-if="index === 0" style="margin-top: 20px">
                    <el-row>
                      <el-col :span="12">
                        <div class="half-image-container">
                          <img :src="BASE_URL + item.poster"
                               alt="item.filmName">
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <p style="color: #FFFFFF;font-size: 18px;font-weight: bold;"> {{ item.filmName }}</p>
                        <p style="color: #ffd04b;font-size: 18px;font-weight: bold;"> {{ item.filmRating }}</p>
                      </el-col>
                    </el-row>
                  </div>

                  <div v-if="index > 0" style="margin-top: 10px" @click="watchFilmById(item.filmId)">
                    <el-row>
                      <el-col :span="2">
                        <p style="color: #ffd04b;font-size: 18px;font-weight: bold;"> {{ index+1 }}</p>
                      </el-col>
                      <el-col :span="20">
                        <p style="color: #FFFFFF;font-size: 18px;text-align: left;line-height: 100%;
                       font-weight: bold;"> {{ item.filmName }}</p>
                      </el-col>
                      <el-col :span="2">
                        <p style="color: #ffd04b;font-size: 18px;font-weight: bold;"> {{ item.filmRating }}</p>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-card>
          </div>

          <div style="text-align: center;margin-top: 30px">
            <el-card style="background-color:#0f1827;border: #0f1827;height: auto">
              <div style="overflow: hidden">
                <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
                <div style="float: left;margin-left: 10px">
                  <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">TOP 10</span>
                </div>
              </div>

              <div>
                <div v-for="(item,index) in topTen" :key="item.index">
                  <div v-if="index === 0" style="margin-top: 20px" @click="watchFilmById(item.filmId)">
                    <el-row>
                      <el-col :span="12">
                        <div class="half-image-container">
                          <img :src="BASE_URL + item.poster"
                               alt="item.filmName">
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <p style="color: #FFFFFF;font-size: 18px;font-weight: bold;"> {{ item.filmName }}</p>
                        <p style="color: #ffd04b;font-size: 18px;font-weight: bold;"> {{ item.filmRating }}</p>
                      </el-col>
                    </el-row>
                  </div>

                  <div v-if="index > 0" style="margin-top: 10px" @click="watchFilmById(item.filmId)">
                   <el-row>
                    <el-col :span="2">
                      <p style="color: #ffd04b;font-size: 18px;font-weight: bold;"> {{ index+1 }}</p>
                    </el-col>
                     <el-col :span="20">
                       <p style="color: #FFFFFF;font-size: 18px;text-align: left;line-height: 100%;
                       font-weight: bold;"> {{ item.filmName }}</p>
                     </el-col>
                     <el-col :span="2">
                       <p style="color: #ffd04b;font-size: 18px;font-weight: bold;"> {{ item.filmRating }}</p>
                     </el-col>
                   </el-row>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-card class="w paginationStyle">
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="filmData.length"
          @current-change="handlePageChange"
          style="position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);"
      />
    </el-card>
  </el-scrollbar>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import qs from "qs";

const currentPage = ref(1);// 默认显示页码
const pageSize = ref(16); // 每页显示6条

// 计算当前页面的数据
const paginatedData = computed(() => {
  const offset = (currentPage.value - 1) * pageSize.value;
  return filmData.value.slice(offset, offset + pageSize.value);
});

// 分页变化时触发
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};

const tagList = ref([]);
const regionList = ref([]);
const releaseYearList = ref([]);
onMounted(() => {
  loadDictOptions(tagList, 'tag');
  loadDictOptions(regionList, 'nationality');
  loadDictOptions(releaseYearList, 'year');
});

const tag = ref('');
const region = ref('');
const releaseYear = ref('');

const searchFilmForm = ref({
  tag: '',
  region: '',
  releaseYear: '',
  releaseStatus: '1',
  status: '1'
});
const reSearch = () => {
  tag.value = '';
  region.value = '';
  releaseYear.value = '';
  search();
}
const filmData = ref([])
const search = () => {
  searchFilmForm.value.tag = tag.value;
  searchFilmForm.value.region = region.value;
  searchFilmForm.value.releaseYear = releaseYear.value;
  let data = qs.stringify(searchFilmForm.value);
  console.log(data);
  axios.get(BASE_URL + '/v1/film/select/userFilm?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          filmData.value = response.data.data;
          console.log(filmData);
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  search();
})
const watchFilmById = (id) => {
  router.push('/details?filmId=' + id)
}
const topTen = ref([])
const searchTopTen = () => {
  axios.get(BASE_URL + '/v1/filmRating/select/topTen?')
      .then((response) => {
        if (response.data.code === 2000) {
          topTen.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
onMounted(() => {
  searchTopTen();
  searchHit();
})
const hit = ref([]);
const searchHit = () => {
  axios.get(BASE_URL + '/v1/filmRating/select/hit?')
      .then((response) => {
        if (response.data.code === 2000) {
          hit.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
</script>

<style scoped>
.choose {
  margin-top: 20px;
  height: auto;
}

.content {
  margin-top: 20px;
  height: 1200px;
}

.paginationStyle {
  margin-top: 20px;
  height: 50px;
  background-color: #0f1827;
  border: #0f1827;
  border-radius: 10px;
  position: relative;
}

.half-image-container {
  width: 150px; /* 根据需要调整宽度 */
  height: 100px; /* 设置为图片高度的一半 */
  overflow: hidden;
  position: absolute;
}

.half-image-container img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

</style>
<style>
.custom-radio .el-radio__inner {
  display: none; /* 隐藏默认圆形 */
}

.custom-radio .el-radio__label {
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* 当被选中时的样式 */
.custom-radio.is-checked .el-radio__label {
  background-color: #671523; /* 选中状态背景颜色 */
  color: #FFFFFF; /* 可选：改变字体颜色 */
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .el-pager li.is-active {
  background-color: #671523;
}
</style>